<template>
	<view class="user-perfetion-page">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" :label-width="200">
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="民族" required name="nation">
				<uni-easyinput type="text" v-model="formData.nation" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="籍贯" required name="nativeplace">
				<uni-easyinput type="text" v-model="formData.nativeplace" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="从事农业时间" required name="work_time">
				<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.work_time" />
			</uni-forms-item>

			<picker @change="faceChange"  :value="faceindex" :range="facelist">
				<uni-forms-item label="政治面貌" required name="face">
					<uni-easyinput type="text" v-model="face_text" placeholder="请选择" />
				</uni-forms-item>
			</picker>
<!-- 				<uni-easyinput type="text" v-model="formData.face" placeholder="请输入" /> -->

			<uni-forms-item label="入党时间(非必填)" name="party_time">
				<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.party_time" />
			</uni-forms-item>
<!-- 			<uni-forms-item label="身份证号" required required name="idcard">
				<uni-easyinput type="text" v-model="formData.idcard" placeholder="请输入" />
			</uni-forms-item> -->
<!-- 			<uni-forms-item label="联系电话" required name="phone">
				<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入" />
			</uni-forms-item> -->
<!-- 			<uni-forms-item label="通讯地址" required name="liveaddress">
				<uni-easyinput type="text" v-model="formData.liveaddress" placeholder="请输入" />
			</uni-forms-item> -->
			
			<picker @change="cultureChange"  :value="cultureindex" :range="culturelist">
				<uni-forms-item label="文化程度" required name="culture">
					<uni-easyinput type="text" v-model="culture_text" placeholder="请选择" />
				</uni-forms-item>
			</picker>
<!-- 			<uni-forms-item label="企业名称" required name="company_name">
				<uni-easyinput type="text" v-model="formData.company_name" placeholder="请输入" />
			</uni-forms-item> -->
<!-- 			<uni-forms-item label="法定代表人" name="legalperson">
				<uni-easyinput type="text" v-model="formData.legalperson" placeholder="请输入" />
			</uni-forms-item> -->
			<uni-forms-item label="职工人数" required name="people">
				<uni-easyinput type="text" v-model="formData.people" placeholder="请输入" />
			</uni-forms-item>
<!-- 			<uni-forms-item label="企业性质" name="nature">
				<uni-easyinput type="text" v-model="formData.nature" placeholder="请输入" />
			</uni-forms-item> -->
<!-- 			<uni-forms-item label="农业分类" required name="classification">
				<uni-data-checkbox v-model="formData.classification" multiple :localdata="industrylist" />
			</uni-forms-item> -->
<!-- 			<picker @change="areaChange" :value="areaindex" :range="addresslist" range-key="title">
				<uni-forms-item label="所属区域" name="address">
					<uni-easyinput type="text" v-model="formData.address" placeholder="请选择" />
				</uni-forms-item>
			</picker> -->
			<div @click="chooseLocation()">
				<uni-forms-item label="公司地址" name="manage">
					<div class="input">
						{{doorplate?doorplate:'请选择公司地址'}}
					</div>
					<i class="Ticonfont Ticon-113fangxiang_xiangyou"></i>
				</uni-forms-item>
			</div>
			<uni-forms-item label="身份证正反面" required name="obverseUrl">
				<Rboy-upload-sfz :obverse-url="formData.obverseUrl" :reverse-url="formData.reverseUrl"
					@selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
			</uni-forms-item>
			<uni-forms-item label="企业营业执照" required name="license">
				<uni-file-picker limit="1" v-model="formData.license"  @select="select" @delete="handleDelete" @fail="fail"></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item label="企业图册" name="cover">
				<uni-file-picker limit="6" v-model="formData.cover" @select="coverselect" @delete="coverhandleDelete"
					@fail="fail"></uni-file-picker>
			</uni-forms-item>
			<div style='margin-top: 10rx;height: 150rpx;'></div>
			<div class="foot">
				<button class="submit" @click="submit" >提交</button>
			</div>
		</uni-forms>
	</view>
</template>

<script>
	// https://ext.dcloud.net.cn/plugin?id=7446 身份证正反面上传文档
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	export default {
		data() {
			return {
				filetype:"",
				industrylist: [],
				areaindex: 0,
				addresslist: [],
				formData: {},
				doorplate: null,
				info: {},
				culture_text:'',
				face_text:'',
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名',
						}, ],
					},
					work_time: {
						rules: [{
							required: true,
							errorMessage: '请选择从事农业时间',
						}],
					},
					face: {
						rules: [{
							required: true,
							errorMessage: '请输入政治面貌',
						}],
					},
					culture: {
						rules: [{
							required: true,
							errorMessage: '请输入文化程度',
						}],
					},
					license: {
						rules: [{
							required: true,
							errorMessage: '请上传营业执照',
						}],
					},
				},
				facelist:["群众", "预备党员","中共党员", "其他党派人士"],
				culturelist:["小学","初中","中专","高中","大专","本科","硕士","博士"],
				faceindex:0,
				cultureindex:0,
			};
		},
		components: {
			RboyUploadSfz,
		},
		created() {
			this.getlist();
			this.getdata();
		},
		onReady() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}

			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			// 区域选则
			areaChange(e) {
				this.areaindex = e.detail.value
				this.formData.address = this.addresslist[this.areaindex].title
			},
			// 群众选择
			faceChange(e){
				this.faceindex = e.detail.value
				this.formData.face = this.faceindex
				this.face_text = this.facelist[this.faceindex];
			},
			// 学历选择
			cultureChange(e){
				this.cultureindex = e.detail.value
				this.formData.culture = this.cultureindex
				this.culture_text = this.culturelist[this.cultureindex];
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.formData.classification = this.industrylist[this.index].title
			},
			getlist() {
				this.$H.get('/company/industrylist', this.data).then(res => {
					console.log(res.data.list)
					let data = res.data.list
					this.industrylist = data.map(v => {
						return {
							value: v.value,
							text: v.label
						}
					})
				})
				this.$H.get('/company/addresslist', this.data).then(res => {
					let data = res.data.list
					this.addresslist = data.map(v => {
						return {
							value: v.value,
							title: v.label
						}
					})
				})
			},
			getdata() {
				this.$H.get('/company/get').then(res => {
					if (res.status == 200) {
						this.formData = res.data.detail
						if(this.formData.nation == null) {
							this.formData.nation = "汉"
						}
						if(this.formData.nativeplace == null) {
							this.formData.nativeplace = "江西宜春"
						}
						this.culture_text = this.culturelist[this.formData.culture ];
						this.face_text = this.facelist[this.formData.face]
						this.doorplate = res.data.detail.doorplate
					}
				})
			},
			// 照片列表上传的记录
			select(e) {
				this.tempFilePaths = e.tempFilePaths
				this.filetype = 'license';
				this.upload(this.tempFilePaths, 0)
			},
			
			// 企业图册
			coverselect(e){
				this.tempFilePaths = e.tempFilePaths
				this.filetype = 'cover';
				this.upload(this.tempFilePaths, 0)
			},

			// 上传失败
			fail(e) {
				uni.showToast({
					title: '上传异常',
					icon: 'success'
				});
			},

			/*
			 *tempFilePaths上传附件的列表
			 *type 0照片 1附件
			 */
			upload(tempFilePaths,type) {
				if (this.tempFilePaths.length == 0) {
					return false
				}
				this.uploadFilePromise(tempFilePaths[0],type);
			},
			
			uploadFilePromise(url,type) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://scny.nclavi.com/api/upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							"Access-Token": uni.getStorageSync('token'),
							"storeId": 10001,
							"platform": "h5"
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							let info = JSON.parse(res.data);
							if (info.status == 200) {
								this.tempFilePaths.splice(0, 1); //删除数组的第1个 因为已经提交好了
								
								if(this.filetype == 'license') {
									this.formData.license.push({
										"name":  info.data.fileInfo.file_name,
										"extname":  info.data.fileInfo.file_ext,
										"url":  info.data.fileInfo.external_url,
										'temp' : url,
									});
									//this.formData.license = info.data.fileInfo.external_url;
								}
								if(this.filetype == 'cover') {
									this.formData.cover.push({
										"name":  info.data.fileInfo.file_name,
										"extname":  info.data.fileInfo.file_ext,
										"url":  info.data.fileInfo.external_url,
										'temp' : url,
									});
								}

								this.upload(this.tempFilePaths,type)
							}
						}
					});
				})
			},
			handleDelete(err) { // 删除图片
				this.formData.license = ""
			},
			coverhandleDelete(err) { // 删除图片
				const num = this.formData.cover.findIndex(v => v.temp === err.tempFilePath);
				this.formData.cover.splice(num, 1);
			},

			// 上传
			sfz_chagne(e) {
				if (e.name == "obverse") {
					console.log(e.name);
/* 					uni.uploadFile({
						url: '/api/upload/image', // 仅为示例，非真实的接口地址
						filePath: e.tempFilePath,
						name: 'file',
						header: {
							"Access-Token": uni.getStorageSync('token'),
							"storeId": 10001,
							"platform": "h5"
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							let info = JSON.parse(res.data);
							
							if (info.status == 200) {
								this.formData.obverseUrl = info.data.fileInfo.external_url;
							}
						}
					}); */
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: 'https://scny.nclavi.com/api/upload/image', // 仅为示例，非真实的接口地址
							filePath: e.tempFilePath,
							name: 'file',
							header: {
								"Access-Token": uni.getStorageSync('token'),
								"storeId": 10001,
								"platform": "h5"
							},
							formData: {
								user: 'test'
							},
							success: (res) => {
								let info = JSON.parse(res.data);
								
								if (info.status == 200) {
									this.formData.obverseUrl = info.data.fileInfo.external_url;
								}
							}
						});
					})
				} else if (e.name == "reverse") {
/* 					uni.uploadFile({
						url: '/api/upload/image', // 仅为示例，非真实的接口地址
						filePath: e.tempFilePath,
						name: 'file',
						header: {
							"Access-Token": uni.getStorageSync('token'),
							"storeId": 10001,
							"platform": "h5"
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							let info = JSON.parse(res.data);
							if (info.status == 200) {
								this.formData.reverseUrl = info.data.fileInfo.external_url;
							}
						}
					}); */
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: 'https://scny.nclavi.com/api/upload/image', // 仅为示例，非真实的接口地址
							filePath: e.tempFilePath,
							name: 'file',
							header: {
								"Access-Token": uni.getStorageSync('token'),
								"storeId": 10001,
								"platform": "h5"
							},
							formData: {
								user: 'test'
							},
							success: (res) => {
								let info = JSON.parse(res.data);
								if (info.status == 200) {
									this.formData.reverseUrl = info.data.fileInfo.external_url;
								}
							}
						});
					})
				}
			},
			// 删除
			del_btn(e) {
				if (e.name == "obverse") {
					this.formData.obverseUrl = ""
				} else if (e.name == "reverse") {
					this.formData.reverseUrl = ""
				}
			},
			// 表单提交
			submit(form) {
				this.$refs.form.validate().then(res => {
					this.$H.post('/user/auth_user', {
						form: this.formData
					}).then(res => {
						if (res.status == 500) {
							uni.showToast({
								icon: "none",
								title: res.message
							})
						}
						if (res.status == 200) {
							uni.showToast({
								icon: "success",
								title: res.message
							})

							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my',
								})
							}, 2000)
						} 
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 选择地址获取经纬度
			chooseLocation() {
				uni.chooseLocation({
					success: res => {
						this.formData.company_address = res.name
						this.formData.doorplate = res.address
						this.doorplate = res.address
						this.formData.latitude = res.latitude
						this.formData.longitude = res.longitude

					}
				});
			},

		}
	}
</script>

<style scoped='scss' scoped>
	.user-perfetion-page {
		padding: 30px 30rpx;
		box-sizing: border-box;
	}

	.foot {
		position: fixed;
		bottom: 0rpx;
		left: 0px;
		width: 100%;
		height: 150rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit {
		width: 600rpx;
		height: 92rpx;
		background: #17BF8B;
		border-radius: 46rpx;
		color: #fff;
	}


	.input {
		/* border-color: rgb(229, 229, 229); */
		background-color: rgb(255, 255, 255);
		border: 1px solid rgb(229, 229, 229);
		height: 70rpx;
		padding: 0px 10rpx;
		line-height: 70rpx;
		color: #666;
		border-radius: 10rpx;
		background: #f1f1f1;
	}

	/deep/ .uni-easyinput__content-input {
		background: #f1f1f1;
	}
</style>